<template>
<div class="clearfix" style="margin-bottom: .1rem;">
  <el-col class="ne-jminput-box" :span="item.colspan ? item.colspan:colspan" v-for="(item,index) in nForm" :key="index">
    <el-form-item v-if="item.type=='jmIpt'" :required="item.required" :label="item.cName" class="u-ipt">
      <el-input
          clearable
          placeholder="请输入内容"
          v-model="item.cValue"
          class="input-with-select"
      >
        <el-select
            v-model="item.oValue"
            slot="append"
            placeholder="请选择"
            class="ne-select-box select-box"
        >
          <el-option
              v-for="item2 in item.opt"
              :key="item2.value"
              :label="item2.label"
              :value="item2.value"
          >
          </el-option>
        </el-select>
      </el-input>
    </el-form-item>
    <el-form-item v-if="item.type=='jmgIpt'" :required="item.required" :label="item.cName" class="u-ipt ne-gjtj">
      <el-input
          clearable
          placeholder="请输入内容"
          v-model="item.cValue"
          class="input-with-select"
      >
        <el-select
            v-model="item.oValue"
            slot="append"
            placeholder="请选择"
            class="ne-select-box select-box"
        >
          <el-option
              v-for="item2 in item.opt"
              :key="item2.value"
              :label="item2.label"
              :value="item2.value"
          >
          </el-option>
        </el-select>
      </el-input>
      <el-button class="ne-gjtj-btn" @click="advancedFun(item.cName, index)">高级条件</el-button>
    </el-form-item>
    <el-form-item v-if="item.type=='Ipt'" :required="item.required" :label="item.cName">
      <el-input
          clearable
          placeholder="请输入内容"
          v-model="item.cValue"
          class="input-with-select"
      >
      </el-input>
    </el-form-item>
    <el-form-item v-if="item.type=='select'" :required="item.required" :label="item.cName">
      <el-select  v-model="item.cValue" :filterable="item.filterable"
                  placeholder="请选择" style="width: 100%">
        <el-option
            v-for="item2 in item.opt"
            :key="item2.value"
            :label="item2.label"
            :value="item2.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item v-if="item.type=='select_5G'" :required="item.required" :label="item.cName">
      <el-select  v-model="item.cValue" :filterable="item.filterable"
                  placeholder="请选择" style="width: 100%">
        <el-option
            v-for="item2 in item.opt"
            :key="item2.value"
            :label="item2.label"
            :value="item2.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
  </el-col>
  <el-col v-if="isbtn" :span="2" style="float: right"><el-button type="primary" @click="query">查询</el-button></el-col>
  <PopAdvancedConditions :gadkey='gadkey' @gvalue = 'valueFun' :title="title" ref="AdvancedConditions"></PopAdvancedConditions>
</div>
</template>

<script>
import PopAdvancedConditions from "@/components/public/PopAdvancedConditions";
export default {
name: "SimForm",
  data(){
    return {
      title:'',
      gadkey:'',
      advancedVisible:false,
      nForm: JSON
    }
  },
  props:{
    colspan:{
      type:Number,
      default:6
    },
   Form:{JSON,Array},
   isbtn:{
     type:Boolean,
     default:false
   },
   starIndex:{
     type:Number,
     default:0
   },
    endIndex:{
      type:Number,
      default:null
    }
  },
  created() {
    this.formStr()
  },
  mounted() {

  },
  components:{
    PopAdvancedConditions
  },
  methods:{
    valueFun(params){
      this.Form[params.key].cValue = params.value;
    },
    advancedFun(t,key){
      console.log(this.$refs);
      this.title = t;
      this.gadkey = key;
      this.$refs['AdvancedConditions'].advancedVisible = true;
    },
    query() {
      this.$emit("queryMethods");
    },
    formStr(){
      if(this.endIndex){
        this.nForm = Object.fromEntries(Object.entries(this.Form).slice(this.starIndex,this.endIndex));
      }else{
        this.nForm = this.Form;
      }
    }
  }
}
/**
 * type类型
 *         jmIpt精确模糊 input
 *         Ipt普通 input
 *
 */
</script>

<style lang="scss" scoped>
::v-deep .ne-gjtj-btn{
  padding: 0 .10rem!important;
  span{
    font-size: .10rem;
  }
}
::v-deep .ne-gjtj .el-form-item__content>div{
  width: calc(100% - .9rem);
  float: left;
}
::v-deep .ne-gjtj .el-form-item__content button{
  float: right;
}
.ne-jminput-box{
  ::v-deep .el-button{
    padding: 0 0.15rem;
    border-radius: 0.05rem;
    height: 0.34rem;
    line-height: 0.32rem;
    min-height: 30px;
  }
    ::v-deep .el-form-item {
      padding: 0 .10rem;
    }
  ::v-deep .el-input__suffix{
    right: 0;
  }
  ::v-deep .el-select .el-input .el-select__caret{
    font-size: .12rem;
    position: relative;
    top: -.01rem;
  }
  //@media screen and (max-width:1300px){
  //  ::v-deep *{
  //    transform:scale(.995);
  //  }
  //}
  ::v-deep .select-box .el-input--suffix .el-input__inner{
    padding-left: .07rem;
    text-align: left;
    padding-right: 0.2rem;
    z-index: 9999;
  }
  .radio-mt {
    margin-top: .10rem;
  }
  .select-box {
    width: 1rem;
    padding: 0;
  }
  .ne-select-box{
    min-width: 44px;
    width: 0.56rem !important;
  }
  ::v-deep .el-input__icon{
    line-height: normal!important;
  }
  ::v-deep .el-form-item__content{
    line-height: normal!important;
  }
}

</style>
